﻿.md-tabs {
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-appbar-background);

    .md-tabs-tabbar {
        padding: 0px 12px;
        display: flex;
        height: 45px;
        pointer-events: auto;

        .md-tab-active {
            color: var(--mud-palette-primary);

            .md-tab-bg {
                color: var(--mud-palette-primary-hover);
            }
        }
    }

    .md-tabs-panels {
        flex: 1;
        position: relative;
        transition: .3s cubic-bezier(0.25, 0.8, 0.5, 1);
        background: var(--mud-palette-background-gray);
        overflow: hidden;
    }
}
.md-tab {
    white-space: nowrap;
    display: flex;
    position: relative;
    padding: 5px 24px;
    gap: 16px;
    align-items: center;
    margin-right: -16px;
    cursor: pointer;
    font-weight: 500;
    .mud-icon-button {
        margin: -4px;
    }
}

.md-tab-bg {
    color: transparent;
    left: 0;
    top: 0;

    &:hover {
        color: var(--mud-palette-action-default-hover);
    }
}
